<template>
  <div>
    <div class="filter-container">
      <el-form v-model="state.pagination">
        <el-row>
          <!--        <el-col span="3">-->
          <!--          <el-form-item label="账单号">-->
          <!--            <el-input v-model="state.pagination.id" placeholder="请输入账单号"  clearable />-->
          <!--          </el-form-item>-->
          <!--        </el-col>-->
          <el-col span="3">
            <el-form-item label="账单类别">
              <el-input v-model="state.formData.type"  placeholder="请输入账单类别" style="width: 150px;" clearable />
            </el-form-item>
          </el-col>
          <el-col span="1">&emsp;</el-col>
          <el-col span="3">
            <el-form-item label="账单创建时间">
              <el-date-picker v-model="state.formData.createTime" type="date" placeholder="选择时间" style="width: 200px;" value-format="YYYY-MM-DD HH:mm:ss" clearable/>
            </el-form-item>
          </el-col>
          <!--  </el-row>-->
          <el-col span="3">
            <el-form-item label="账单金额">
              <el-col span="">
                <el-input  v-model="state.pagination.minAmount" placeholder="请输入最小金额" style="width: 150px;" clearable />
              </el-col>
              <el-col span="1">
                &nbsp;- &nbsp;
              </el-col>
              <el-col span="1">
                <el-input v-model="state.pagination.maxAmount" placeholder="请输入最大金额" style="width: 150px;" clearable />
              </el-col>
            </el-form-item>
          </el-col>
          <el-col span="3">
            <!-- <el-button  type="primary" @click="load()" >查询</el-button>-->
            <el-button  type="primary" @click="load()" >查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>


    <el-table :data="state.dataList"  style="width: 100%">
      <el-table-column label="ID" align="center" prop="id"></el-table-column>
      <el-table-column label="账单类型" align="center" prop="type"></el-table-column>
      <el-table-column label="账单描述" align="center" prop="billDesc"></el-table-column>
      <el-table-column label="账单金额(元)" align="center" prop="amount"></el-table-column>
      <el-table-column label="账单创建时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template v-slot="{row}">
          <!--        <el-button link type="primary" size="small">修改</el-button>-->
          <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        class="pagiantion"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="state.pagination.currentPage"
        :page-sizes="[2, 3, 5]"
        :page-size="state.pagination.pageSize"
        :total="state.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>


    <!--  <el-dialog-->
    <!--      v-model="state.dialogFormVisible"-->
    <!--      title="Tips"-->
    <!--      width="30%"-->
    <!--  >-->
    <!--&lt;!&ndash;    <span>新增账单</span>&ndash;&gt;-->
    <!--    <template #footer>-->
    <!--      <span class="dialog-footer">-->
    <!--        <el-button @click="state.dialogFormVisible = false">Cancel</el-button>-->
    <!--        <el-button type="primary" @click="state.dialogFormVisible = false">-->
    <!--          Confirm-->
    <!--        </el-button>-->
    <!--      </span>-->
    <!--    </template>-->
    <!--  </el-dialog>-->



  </div>

</template>

<script setup>
import {reactive,ref} from "vue";
import instance from "../../../request";
import { ElMessageBox, ElMessage } from 'element-plus';

const state = reactive({
  dataList: [],//表格数据
  formData: {},
  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible4Edit: false,//编辑表单是否可见
  // rules: {//校验规则
  //   type: [{required: true, message: '图书类别为必填项', trigger: 'blur'}],
  //   name: [{required: true, message: '图书名称为必填项', trigger: 'blur'}]
  // },

  pagination: reactive({//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize: 5,//每页显示的记录数
    total: 0,//总记录数
    // billNumber: "",
    type: "",
    createTime: "",
    minAmount: "",
    maxAmount: "",
  })

});

// 处理分页大小变更
const handleSizeChange = (pageSize) => {
  state.pagination.pageSize = pageSize;
  load();
};

// 处理页码变更
const handlePageChange = (currentPage) => {
  state.pagination.currentPage = currentPage;
  load();
};

const load = () => {
  //
  if(state.pagination.minAmount===""){
    state.pagination.minAmount=0;
  }
  if (state.pagination.maxAmount===""){
    state.pagination.maxAmount=0;
  }

  instance.post('/bill/'+state.pagination.currentPage+"/"+state.pagination.pageSize+"/"+state.pagination.minAmount+"/"+state.pagination.maxAmount,state.formData).then(res => {
    console.log(res.data);
    state.pagination.currentPage=res.data.current;
    state.pagination.pageSize=res.data.size;
    state.pagination.total=res.data.total;
    state.dataList = res.data.records;
  })
  //     .catch(error => {
  //   console.log(error);
  // });
}


const handleCreate = () => {
  console.log("8888")
  state.dialogFormVisible = true;
  resetForm();
}

const resetForm = () => {
  state.formData = {};
}

const cancel = () => {
  this.dialogFormVisible = false;
  this.dialogFormVisible4Edit = false;
  // this.$message.info("操作取消");
}


const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该订单吗？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        // User confirmed, proceed with deletion
        instance.delete("/bill/" + row.id)
            .then((res) => {
              if (res.flag) {
                ElMessage.success("删除成功 ");
              } else {
                ElMessage.error("删除失败");
              }
            })
            .finally(() => {
              load();
            });
      }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  });
};
//删除弹窗1
// const handleDelete = (row) => {
//   const confirmDialog = () => {
//     return new Promise((resolve, reject) => {
//       // 弹出确认删除的对话框
//       const isConfirmed = confirm("确定要删除吗？");
//       // 确认删除，则执行resolve(true)，否则执行resolve(false)
//       if (isConfirmed) {
//         resolve(true);
//       } else {
//         resolve(false);
//       }
//     });
//   };
//
//   confirmDialog().then((shouldDelete) => {
//     if (shouldDelete) {
//       instance.delete("/bill/" + row.id)
//           .then((res) => {
//             if (res.flag) {
//               this.$message.success(res.msg);
//             } else {
//               this.$message.error(res.msg);
//             }
//           })
//           .finally(() => {
//             load();
//           });
//     }
//   });
// };


// 删除2
// const handleDelete=(row)=> {
//   instance.delete("/bill/"+row.id).then((res)=>{
//     if(res.flag){
//       this.$message.success(res.msg);
//     }else{
//       this.$message.error(res.msg);
//     }
//   }).finally(()=>{
//     load()
//   });
// }

//添加
// const handleAdd=()=> {
//   instance.post("/bill/",this.formData).then((res)=>{
// //如果操作成功，关闭弹层，显示数据
//     if(res.data.flag){
//       this.dialogFormVisible = false;
//       this.$message.success(res.data.msg);
//     }else {
//       this.$message.error(res.data.msg);
//     }
//   }).finally(()=>{
//     this.getAll();
//   });
// }

load();


</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-form-item {
  margin-right: 10px;
}

.filter-container .butT {
  margin-left: 10px;
}
</style>